<script lang="ts" setup>
  import { useRouter } from 'vue-router';
  import { useCityStore } from '@/store';

  const props = defineProps({
    bgColor: String,
    icon: String,
    field: {
      type: String,
      default: '',
    },
    iconText: {
      type: String,
      default () {
        return '分类'
      }
    }
  });

  const router = useRouter();
  const cityStore = useCityStore();

  function onRouteTo(field: string) {
    cityStore.setField(field);
    router.push('/list');
  }
</script>

<template>
  <div class="icon-item">
		<div
      class="icon"
      @click="onRouteTo(props.field)"
      :style="{ backgroundColor: props.bgColor }"
    >
			<span class="iconfont" :class="props.icon" />
		</div>
		<p class="icon-text">
      {{ props.iconText }}
    </p>
	</div>
</template>

<style lang="scss" scoped>
  @import "./index.scss";
</style>
